HTML Practice Compiler

2. Reference Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern Page with Dark Mode</title>
<style>
:root {
--bg: linear-gradient(135deg, #1e1e2f, #3a3a5a);
--card-bg: rgba(255, 255, 255, 0.08);
--text: #ffffff;
}

body.light {
--bg: #f5f5f5;
--card-bg: #ffffff;
--text: #222222;
}

body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
font-family: "Inter", Arial, sans-serif;
color: var(--text);
transition: background 0.4s ease, color 0.4s ease;
}

.card {
padding: 40px 60px;
background: var(--card-bg);
border-radius: 16px;
backdrop-filter: blur(12px);
text-align: center;
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
transition: background 0.4s ease;
}

h1 {
font-size: 48px;
margin: 0 0 10px;
font-weight: 600;
}

p {
font-size: 18px;
opacity: 0.8;
}

.toggle-btn {
margin-top: 25px;
padding: 12px 22px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
background: #ffffff22;
color: var(--text);
backdrop-filter: blur(8px);
transition: 0.3s;
}

body.light .toggle-btn {
background: #22222222;
color: #222;
}

.toggle-btn:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="card">
<h1>Hello,</h1>
<p>Welcome to your modern HTML page.</p>
<button class="toggle-btn" onclick="toggleMode()">Toggle Dark Mode</button>
</div>

HTML Practice Compiler

1. Write Code

2. Reference Code

3. Preview